<template>
  <div class="signed-agent-list-view view-container">

    <div class="main-content">

      <div class="list-container">

        <div style="margin: 0">
          <el-form
            :inline="true"
            :model="formData"
            label-width="110px"
            label-position="right"
            size="small"
            class="filter-form-inline"
          >
            <el-row :gutter="20" style="margin-left: 0px;margin-right:0px;">
              <el-col
                :lg="6"
                :xs="5"
              >
                <el-form-item
                  label="代理状态"
                  style="width: 100%"
                >
                  <el-select
                    v-model="formData.tradeStatus"
                    style="width: 100%"
                    placeholder="请选择代理状态"
                    @change="listSearch"
                  >
                    <el-option
                      v-for="(item, idx) in trades"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />

                  </el-select>
                </el-form-item>
              </el-col>
              <el-col
                :lg="6"
                :xs="5"
              >
                <el-form-item
                  label="数据状态"
                  style="width: 100%"
                >
                  <el-select
                    v-model="formData.agentStatus"
                    style="width: 100%"
                    placeholder="请选择数据状态"
                    @change="listSearch"
                  >
                    <el-option
                      v-for="(item, idx) in statusOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />

                  </el-select>
                </el-form-item>
              </el-col>
              <el-col
                :lg="6"
                :xs="5"
              >
                <el-form-item
                  label="关键字"
                  style="width: 100%;"
                >
                  <el-input
                    v-model="formData.keyword"
                    placeholder="输入名称、编号、代码证"
                  />
                </el-form-item>
              </el-col>
              <el-col
                :lg="2"
                :xs="2"
              >
                <el-form-item style="width: 100%">
                  <more-search-btn v-model:is-more="visible" />
                </el-form-item>
              </el-col>
              <el-col
                :lg="4"
                :xs="4"
              >
                <el-form-item style="width: 100%;">
                  <el-button class="border-btn" @click="reset">重置</el-button>
                  <el-button
                    type="primary"
                    icon=""
                    @click="listSearch"
                  >搜索</el-button>
                </el-form-item>
              </el-col>
              <template v-if="visible">

                <el-col
                  :lg="6"
                  :xs="5"
                >
                  <el-form-item
                    label="企业所在地"
                    style="width: 100%"
                  >
                    <el-cascader
                      v-model="formData.value"
                      :popper-append-to-body="false"
                      style="width:100%"
                      placeholder="请选择地区"
                      :options="citys"
                      :props="{ value:'regionCode',label:'regionName' }"
                      @change="areaChange"
                    />
                  </el-form-item>
                </el-col>

                <el-col
                  :lg="6"
                  :xs="5"
                >
                  <el-form-item
                    label="代理商级别"
                    style="width: 100%"
                  >
                    <el-select
                      v-model="formData.agentLevel"
                      style="width: 100%"
                      placeholder="请选择代理商级别"
                      @change="listSearch"
                    >
                      <el-option
                        v-for="(item, idx) in levelOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />

                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col
                  :lg="8"
                  :xs="7"
                >
                  <el-form-item
                    label="首次开户时间"
                    style="width: 100%"
                  >
                    <date-range-picker
                      v-model:date="formData.date"
                      style="width: 100%;"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      @change="dateChange"
                    />
                  </el-form-item>
                </el-col>
              </template>

            </el-row>
          </el-form>
        </div>

        <table-view
          :visible="visible"
          :data="tableData"
          @row-click="rowClick"
        >
          <el-table-column
            show-overflow-tooltip
            align="center"
            header-align="center"
            prop="agentNumber"
            label="代理商编号"
            :min-width="100"
          />
          <el-table-column
            show-overflow-tooltip
            align="left"
            header-align="center"
            prop="agentName"
            label="代理商名称"
            :min-width="250"
          />
          <el-table-column
            align="center"
            header-align="center"
            prop="planInfo.productName"
            label="代理级别"
            :min-width="100"
          >
            <template #default="scope">
              {{ getLabel('agent_level',scope.row.agentLevel) }}
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="center"
            header-align="center"
            prop="creditCode"
            label="统一社会信用代码"
            :min-width="150"
          />
          <el-table-column
            align="center"
            header-align="center"
            prop="planInfo.packSpecs"
            label="企业所在地区"
            show-overflow-tooltip
            :min-width="150"
          >
            <template #default="scope">
              {{ scope.row.provinceName }}/{{ scope.row.cityName }}/{{ scope.row.areaName }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            header-align="center"
            label="首次开户时间"
            :min-width="160"
          >
            <template #default="scope">
              {{ dateFormat('yyyy-mm-dd HH:MM',scope.row.firstOpen) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            header-align="center"
            label="代理状态"
            :min-width="100"
          >
            <template #default="scope">
              <div class="tab-line">
                <span v-if="scope.row.tradeStatus == 1">正式代理商</span>
                <span v-else>准代理商</span>
              </div>

              <!--              <div-->
              <!--                v-if="scope.row.flowStatus!=='AGREE'"-->
              <!--                class="flow-status-color"-->
              <!--              >{{ getLabel('approval_result',scope.row.flowStatus) }}</div>-->
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            header-align="center"
            prop="planInfo.terminalPrice"
            label="数据状态"
            :min-width="100"
          >
            <template #default="scope">
              <div class="tab-line">
                <span>{{ getLabel('agent_status',scope.row.agentStatus) }}</span>
                <div v-if="scope.row.flowStatus=='DOING'" class="flow-status-color">
                  [变更审核中]
                </div>
              </div>

            </template>
          </el-table-column>
          <el-table-column
            align="center"
            header-align="center"
            fixed="right"
            label="操作"
            :min-width="150"
          >
            <template #default="scope">

              <el-button
                v-if="scope.row.flowStatus != 'DOING'"
                type="text"
                @click.stop="onChange(scope.row)"
              >变更信息</el-button>

              <!--                            <el-button-->
              <!--                                    v-if="scope.row.haveDistribute != 1 && scope.row.flowStatus != 'DOING'"-->
              <!--                                    type="text"-->
              <!--                                    @click.stop="onChange(scope.row)"-->
              <!--                            >生成配送商</el-button>-->
              <!--                            <el-button-->
              <!--                                    v-if="scope.row.agentStatus == 1"-->
              <!--                                    type="text"-->
              <!--                                    @click.stop="onEnd(scope.row)"-->
              <!--                            >终止合作</el-button>-->

            </template>
          </el-table-column>
        </table-view>

        <Pagination
          v-model:page="formData.page"
          v-model:limit="formData.pageSize"
          style="display: flex; justify-content: flex-end"
          :total="total"
          @pagination="getListData"
        />

      </div>

    </div>

    <signed-agent-change-view
      ref="signedView"
      @success="onSuccess"
    />

  </div>
</template>

<script>
import {crmStore} from '@CRM/store'
import areas from '@/utils/area.js'
import signedAgentChangeView from '../modules/signedAgentChangeView.vue'
import {useRouter} from 'vue-router'
import {defineComponent, getCurrentInstance, inject, onBeforeMount, reactive, ref, toRefs,} from 'vue'

export default defineComponent({
  name: 'SignedAgentList',
  components: { signedAgentChangeView },
  setup() {
    const currentInstance = getCurrentInstance()
    const router = useRouter()
    const api = inject('api')
    const citys = areas
    const trades = ref([
      {
        label: '全部',
        value: '',
      },
      {
        label: '准代理商',
        value: '-1',
      },
      {
        label: '正式代理商',
        value: '1',
      },
    ])
    const levelOptions =
              crmStore.getters['dictionary/getDictionary']['agent_level']
    const statusOptions =
              crmStore.getters['dictionary/getDictionary']['agent_status']
    var signedView = ref(null)
    var visible = ref(false)
    var total = ref(0)
    // var formData = reactive({
    //     keyword:'',
    //     page: 1,
    //     pageSize: 10,
    //     tradeStatus:'',
    //     agentStatus:'',
    //     date:[],
    //     startTime:null,
    //     endTime:null,
    //     agentLevel:'',
    //     value:'',
    //     provinceCode:'',
    //     cityCode:'',
    //     areaCode:'',
    // })

    var data = reactive({
      formData: {
        keyword: '',
        page: 1,
        pageSize: 10,
        tradeStatus: '',
        agentStatus: '',
        date: [],
        startTime: null,
        endTime: null,
        agentLevel: '',
        value: '',
        provinceCode: '',
        cityCode: '',
        areaCode: '',
      },
    })

    var tableData = ref([])

    const reset = () => {
      data.formData.keyword = ''
      data.formData.page = 1
      data.formData.tradeStatus = ''
      data.formData.agentStatus = ''
      data.formData.date = []
      data.formData.startTime = null
      data.formData.endTime = null
      data.formData.agentLevel = ''
      data.formData.value = ''
      data.formData.provinceCode = ''
      data.formData.cityCode = ''
      data.formData.areaCode = ''
      getListData()
    }

    const dateChange = (val) => {
      if (val.length > 1) {
        data.formData.startTime = val[0]
        data.formData.endTime = val[1]
      }
      data.formData.page = 1
      getListData()
    }

    const areaChange = (val) => {
      if (val) {
        data.formData.provinceCode = val[0]
        data.formData.cityCode = val[1]
        data.formData.areaCode = val[2]
      }
      data.formData.page = 1
      getListData()
    }

    const getListData = () => {
      api.signedAgent.AGENT_OPENED_ACCOUNT_LIST(data.formData).then((res) => {
        if (!res.code && res.data) {
          tableData.value = res.data.list
          total.value = res.data.total
        }
      })
    }

    onBeforeMount(() => {
      getListData()
    })

    const listSearch = () => {
      data.formData.page = 1
      getListData()
    }

    const onChange = (data) => {
      console.log(signedView)
      signedView.value.openDialog(data)
    }

    const rowClick = (value) => {
      router.push({ name: 'signedAgent-detail', query: { id: value.id }})
    }

    const onSuccess = () => {
      currentInstance.proxy.customMessage({
        type: 'success',
        message: '操作成功',
      })

      getListData()
    }

    const onEnd = (row) => {
      currentInstance.proxy
        .alertBox({
          message: '是否确认终止合作？',
          title: '终止合作',
        })
        .then(() => {
          api.signedAgent.AGENT_END(row.id).then((res) => {
            if (!res.code && res.data) {
              currentInstance.proxy.customMessage({
                type: 'success',
                message: '操作成功',
              })
              getList()
            }
          })
        })
        .catch((err) => {
          console.log(err)
        })
    }

    return {
      ...toRefs(data),
      tableData,
      signedView,
      total,
      trades,
      visible,
      levelOptions,
      statusOptions,
      citys,

      listSearch,
      rowClick,
      onChange,
      onSuccess,
      onEnd,
      getListData,
      dateChange,
      areaChange,
      reset,
    }
  },
})
</script>

<style scoped>
</style>
